<template>
  <div class="">
    <!-- 历史记录 -->
    <van-cell-group>
      <van-cell v-if="isEdit" title="历史记录">
        <van-icon name="delete" />
        <span @click="delAll">全部删除</span>
        &nbsp;&nbsp;
        <span @click="isEdit = false">完成</span>
      </van-cell>

      <van-cell v-else title="搜索历史">
        <van-icon name="delete" @click="isEdit = true" />
      </van-cell>

      <!-- 搜索历史 列表项 -->
      <van-cell :title="item" v-for="(item, index) in searchList" :key="index">
        <van-icon
          @click="delOne(index)"
          v-show="isEdit"
          name="close"
        ></van-icon>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'SearchHistory', // 搜索历史
  props: {
    // 搜索关键字历史--------
    searchList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      // 历史记录 编辑状态
      isEdit: false
    }
  },
  created() {},
  methods: {
    // 1.删除所有搜索历史---------------------
    delAll() {
      this.$dialog
        .confirm({
          title: '来自系统的警告',
          message: '您确认要全部删除吗？亲'
        })
        .then(() => {
          // 调用父组件设置的事件
          this.$emit('onDelAll')
        })
        .catch(() => {
          // on cancel
        })
    },
    // 2.删除指定的历史-----------------------
    delOne(i) {
      this.$dialog
        .confirm({
          title: '来自系统的警告',
          message: '您确认要删除这条记录吗？亲'
        })
        .then(() => {
          // 删除 数组中指定的元素
          this.searchList.splice(i, 1)
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  computed: {},
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
</style>
